<template>
    <div>
        <div class="reback">
            <el-button type="text" @click="$router.back(-1)">返回</el-button>
        </div>
        <div class="base_info">
            <h3 style="">基本信息</h3>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" >
                <el-form-item label="组号">
                    <el-input v-model="formLabelAlign.groupId"></el-input>
                </el-form-item>
                <el-form-item label="课题名称">
                    <el-input v-model="formLabelAlign.subjectName"></el-input>
                </el-form-item>
                <el-form-item label="课题编号">
                    <el-input v-model="formLabelAlign.subjectId"></el-input>
                </el-form-item>
                <el-form-item label="人数">
                    <el-input v-model="formLabelAlign.count"></el-input>
                </el-form-item>
                <el-form-item label="组长名字">
                    <el-input v-model="formLabelAlign.groupLeaderName"></el-input>
                </el-form-item>
                
            </el-form>

        </div>
        <el-divider></el-divider>
        <idv class="menbers_info">
            <h3>成员信息</h3>
            <div class="operation">

                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="姓名" >
                        <el-input v-model="formInline.username" placeholder="姓名" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="selectSubject">查询</el-button>
                       
                       
                    </el-form-item>
                </el-form>

                <el-dialog title="查询信息" :visible.sync="selectDialogTableVisible">
                    <el-table :data="selectData">
                        <el-table-column property="username" label="学号" width="150"></el-table-column>
                        <el-table-column property="stuName" label="姓名"></el-table-column>
                        <el-table-column property="className" label="信息"></el-table-column>
                        <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button  type="primary"  @click="addmenbers(scope.row)" >添加</el-button>
                        </template>
                        </el-table-column>
                    </el-table>

                </el-dialog>

                
                
               
            </div>
            <el-table :data="tableData" >
            <el-table-column prop="username" label="学号" width="150px ">
            </el-table-column>
            <el-table-column prop="stuName" label="姓名" width="120px" >
            </el-table-column>
            <el-table-column  label="身份" width="120px">
                <template slot-scope="scope">
                        {{ scope.row.identity === 1 ? '组长' : '成员' }}
                </template>
            </el-table-column>
            <el-table-column  prop="className"  label="信息信息" width="250px">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                
                <el-button size="mini" type="danger" @click="removeMembers(scope.row.username)" >删除</el-button>
              </template>
            </el-table-column>
            </el-table>
        </idv>
        
    </div>
</template>

<script>

import  api from '@/api/subject/student'
import  groupApi from '@/api/subject/group'
  export default {
    data() {
      return {
        formLabelAlign: {
          subjectId: '',
          subjectName: '',
          groupId: '',
          count:'',
          groupLeaderName:''
          
          
          

        },
        tableData:{},
        formInline:{},
        selectDialogTableVisible:false,
        selectData:{}

      }
    },
  
    created() {
        //获取路由id
        this.formLabelAlign = this.$route.params
        this.getStudentInfoList(this.$route.params.subjectId,this.$route.params.courseClassId)
       
        
        
    },
    methods: {
      getStudentInfoList(subjectid,classId){
          api.getGroupStudentInfoList(subjectid,classId)
          .then(response =>{
            this.tableData=response.data;
            console.log(response.data)
            console.log(tableData)

          }).catch(error =>{

          })
      },
      selectSubject(){
          api.selectStudentByLike(this.formInline.username)
          .then(response =>{
              this.selectDialogTableVisible=true
              this.selectData = response.data


          })
      },
      removeMembers(stuId){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                groupApi.removeStudentForm(stuId)
                .then(response =>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(error =>{
                    this.$message({
                        type: 'error',
                        message: '删除失敗!'
                    });

                })
            
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
         
      },

      //有个错误，添加是学生并没有选着课题的
      addmenbers(row){
          groupApi.addGroupMember(this.formLabelAlign.subjectId,row)
          .then(response=>{
              this.$message({
                    message: '添加成功',
                    type: 'success'
                });

          }).catch(error =>{
              this.$message.error('添加失敗');

          })

      }
      
      
    }
  }
</script>
<style scoped>
.base_info{
    width: 70%;
    margin: 100px auto;
    text-align: center;
    border: 1px solid #eeeeee;
    
}
.menbers_info{
    width: 70%  !important;
    
    margin: 0 auto ;
    text-align: center;

   
    
}
.menbers_info span{
   

   
    text-align: center;
}

.reback{
    width: 80px;
    right:  170px;
    position: absolute;
    size: 35px;
    top: 150px;
    text-align: center;
    
}


.operation{
    width: 80% ;
    margin: 30px auto 100px;
   
}



</style>
<style lang="scss">
.base_info{
    width: 50% !important;
    margin: 100px auto;
    padding: 40px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.menbers_info .el-table {
    width: 70% !important;
    margin:0  auto 300px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    
}
.reback .el-button{
      font-size: 20px !important;
}
.menbers_info .el-form-item__content{
    width: 500px  !important;
    

}
.operation .el-form-item{
    width: 330px !important;
}
.operation .el-form-item__content{
    width: 250px !important;

}


</style>